<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/layui_v1/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/login.css" media="all"/>
</head>
<body>
<video class="video-player" preload="auto" autoplay="autoplay" loop="loop" data-height="1080" data-width="1920"
       height="1080" width="1920">
    <source src="${pageContext.request.contextPath}/video/login.mp4" type="video/mp4">
</video>
<div class="video_mask"></div>
<div class="login">
    <h1>Daily 后台管理登录</h1>
    <form id="login_form" class="layui-form" action="${pageContext.request.contextPath}/userAction_login.action"
          lay-filter="login_form" method="post">
        <div class="layui-form-item">
            <input class="layui-input" name="username" placeholder="用户名" lay-verify="check_username" type="text"
                   autocomplete="off">
        </div>
        <div class="layui-form-item">
            <input class="layui-input" name="password" placeholder="密码" lay-verify="required" type="password"
                   autocomplete="off">
        </div>
        <div class="layui-form-item form_code">
            <input class="layui-input" name="checkcode" placeholder="验证码" lay-verify="check_checkCode" type="text"
                   autocomplete="off">
            <div class="code">
                <img width="116" height="36"
                     id="loginform:vCode"
                     src="${pageContext.request.contextPath }/validatecode.jsp"
                     onclick="javascript:document.getElementById('loginform:vCode').src='${pageContext.request.contextPath }/validatecode.jsp?'+Math.random();"/>
            </div>
        </div>
        <button class="layui-btn login_btn" lay-submit="" lay-filter="login">登录</button>
    </form>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui_v1/layui.js"></script>
<script>
    layui.config({
        base: "${pageContext.request.contextPath}/js/"
    }).use(['form', 'layer'], function () {
        var form = layui.form(),
            layer = parent.layer === undefined ? layui.layer : parent.layer,
            $ = layui.jquery;

        form.verify({
            check_username: function (value) {
                var message = "";
                $.ajax({
                    url: "${pageContext.request.contextPath}/userAction_validataUsername.action",
                    type: 'POST',
                    async: false,
                    data: {username: value},
                    success: function (back) {
                        if (back == '0') {
                            message = "登陆名不存在";
                        }
                    }
                })
                if (message !== "") {
                    return message;
                }
            }
            , check_checkCode: function (value) {
                var message = "";
                $.ajax({
                    url: "${pageContext.request.contextPath}/userAction_validataCheckCode.action",
                    type: 'POST',
                    async: false,
                    data: {checkcode: value},
                    success: function (back) {
                        if (back == '0') {
                            message = "验证码错误";
                            document.getElementById('loginform:vCode').src = '${pageContext.request.contextPath }/validatecode.jsp?' + Math.random();
                        }
                    }
                })
                if (message !== "") {
                    return message;
                }
            }
        });

        //监听提交
        form.on('submit(login_form)', function (data) {


            $.post("${pageContext.request.contextPath}/userAction_login.action",
                $("#login_form").serialize(),
                function (data) {
                    if (data === 'success') {
                        location.href = '${pageContext.request.contextPath}/index.jsp';
                    } else if (data === 'failed') {
                        $("#login_form")[0].reset();
                        layer.msg("账号或密码错误~！");
                    }
                });
            return false;
        });

        //video背景
        $(window).resize(function () {
            if ($(".video-player").width() > $(window).width()) {
                $(".video-player").css({
                    "height": $(window).height(),
                    "width": "auto",
                    "left": -($(".video-player").width() - $(window).width()) / 2
                });
            } else {
                $(".video-player").css({
                    "width": $(window).width(),
                    "height": "auto",
                    "left": -($(".video-player").width() - $(window).width()) / 2
                });
            }
        }).resize();

    });

</script>
</body>
</html>